<template>
    <div id="canvas" style="width: 100%;height: 100%;" ref="canvas"></div>
</template>
  
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts'
const canvas = ref() // dom实例
let myChart: any = null // echarts实例

onMounted(() => {
    setTimeout(() => {
        renderChart()
    }, 200);

})
const renderChart = () => {
    let planArr = [2130, 1994, 2018, 2598, 3984, 2129, 1839, 2130, 420];
    let checkArr = [2030, 1794, 1818, 2298, 3084, 2094, 1536, 1830, 330];
    let perArr = ['', '', '', '', '', '', '', '', ''];
    let xName = [
        '梅村新区',
        '和谐小区',
        '鸟巢花园',
        '华府天地',
        '星光城市',
        '紫藤苑',
        '山水人家',
        '花样年华',
        '怡园公寓'
    ];;
    myChart = echarts.init(canvas.value)
    let option = {
        title: {
            show: false,
            text: "\n\n\n\n银\n\n行\n\n授\n\n信",
            fontSize: 24,
            // subtext: '数据来自甲方'
        },
        // backgroundColor: "#032272",
        tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(0, 0, 0, 0.63)", // 设置背景颜色
            textStyle: {
                color: "#fff",
            },
            borderColor: "rgba(255,255,255, .5)",
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "line", // 默认为直线，可选为：'line' | 'shadow'
                // show:false
            },
            formatter: function (param) {
                // console.log(param);
                var relVal = "";
                relVal = param[0].name + "<br/>";
                relVal += param[0].seriesName + "：" + param[0].value + "<br/>";
                relVal += param[1].seriesName + "：" + param[1].value;
                return relVal;
            },
        },
        dataZoom: [
            {
                type: "inside",
                startValue: 0,
                endValue: 2,
                minValueSpan: 2,
                maxValueSpan: 2,
                yAxisIndex: [0],
                zoomOnMouseWheel: false, // 关闭滚轮缩放
                moveOnMouseWheel: true, // 开启滚轮平移
                moveOnMouseMove: true // 鼠标移动能触发数据窗口平移 
            },
            {
                type: 'slider',
                realtime: true,
                startValue: 0,
                endValue: 2,
                height: '90%',
                yAxisIndex: [0], // 控制y轴滚动
                fillerColor: "rgba(0, 156, 255, 1)", // 滚动条颜色
                backgroundColor: 'RGBA(16, 133, 223, 1)',
                borderColor: "RGBA(16, 133, 223, 1)",
                borderRadius: 24,
                handleSize: 0, // 两边手柄尺寸
                showDataShadow: false, // 是否显示数据阴影 默认auto
                width: 14,
                showDetail: false, // 拖拽时是否展示滚动条两侧的文字
                top: '3%',
                right: '0',
                show: false
            }

        ],

        legend: {
            show: true,
            // data，就是取得每个series里面的name属性。
            orient: "horizontal",
            icon: "", // 图例形状
            padding: [0, 0, 10, 0],
            top: "1%",
            //   itemRadius: [20, 20, 20, 20],
            itemWidth: 20, // 小圆点宽度
            itemHeight: 7, // 小圆点高度
            itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
            textStyle: {
                fontSize: 14,
                color: "#fff",
            },
        },
        grid: {
            // 设置网格属性
            // show:true,
            x: 55,
            y: 20, //! -- 距离上面(top)的高度
            // x2:35,
            y2: 25, //! -- 距离底部的高度
            bottom: "10%",
            left: "15%", // 网格距离容器左侧的距离
            right: "6%", // 网格距离容器右侧的距离
            borderWidth: 1,
            containLabel: false,
        },
        xAxis: {
            type: "value",
            show: true,
            nameTextStyle: {
                color: "#fff",
                fontSize: "11px",
            },
            axisTick: {
                // 去掉刻度
                show: false,
            },

            // 坐标轴
            axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: "rgba(0, 156, 255, 1)",
                },
                textStyle: {
                    color: "#fff",
                    fontSize: "10",
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: ["#009CFF"],
                    width: "0.5", // 坐标轴线线宽
                },
            },
            axisLabel: {
                textStyle: {
                    color: "#DCDCDC",
                    fontWeight: 500,
                    fontSize: "13",
                },
            },
        },
        yAxis: [
            {
                type: "category",
                axisTick: {
                    // 去掉刻度
                    show: false,
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: ["#009CFF"],
                        width: "0.5", // 坐标轴线线宽
                    },
                },
                interval: 0,
                inverse: true, // 顺序
                // splitNumber: 8,
                // 坐标值标注
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#FFFFFF ",
                    },
                },
                axisLine: {
                    show: true, // 是否显示y轴
                    lineStyle: {
                        color: "#009CFF", // 坐标轴线线的颜色
                        width: "1", // 坐标轴线线宽
                    },
                },
                data: xName,
            },
            {
                type: "category",
                interval: 5,
                axisTick: {
                    // 去掉刻度
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                splitNumber: 8,
                data: perArr,
            },
        ],
        series: [
            {
              /* 背景图*/ type: "bar",
                yAxisIndex: 1,
                silent: true,
                itemStyle: {
                    normal: {
                        show: true,
                        color: "rgba(255, 255, 255, .11)",
                        barBorderRadius: 7,
                        borderWidth: 0,
                    },
                },
                barWidth: "13px",
                barGap: 1,
                data: [1800, 1800, 1800],
            },
            {
              /* 背景图*/ type: "bar",
                yAxisIndex: 1,
                silent: true,
                itemStyle: {
                    normal: {
                        show: true,
                        color: "rgba(255, 255, 255, .11)",
                        barBorderRadius: 7,
                        borderWidth: 0,
                    },
                },
                barWidth: "13px",
                barGap: 1,
                data: [1800, 1800, 1800],
            },
            {
                name: "省内",
                type: "bar",
                barWidth: "13px",
                nameTextStyle: {
                    width: 20,
                    fontSize: 14,
                    fontFamily: "Times New Roman",
                    borderColor: "#51bbfe",
                    borderWidth: 1,
                    backgroundColor: "#022453",
                    color: "#fff",
                    padding: [4, 5, 4, 165],
                },
                itemStyle: {
                    normal: {
                        barBorderRadius: 7,
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: "#01FFFF",
                            },
                            {
                                offset: 1,
                                color: "#0a61ba",
                            },
                        ]),
                    },
                    // emphasis: {
                    //     barBorderColor: '#644424',
                    //     barBorderWidth: '1'
                    //     // color: 'rgba(26,177,98,.8)'
                    // }
                },
                label: {
                    normal: {
                        show: true,
                        position: "right",
                        formatter: "{c}",
                        textStyle: {
                            color: "#01FDFF",
                            fontSize: 12,
                        },
                    },
                },
                barGap: 1,
                data: planArr,
            },
            {
                name: "省外",
                type: "bar",
                barWidth: "13px",
                itemStyle: {
                    normal: {
                        barBorderRadius: 7,
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: "#48A2FD",
                            },
                            {
                                offset: 1,
                                color: "#FFA800",
                            },
                        ]),
                    },
                    // emphasis: {
                    //     barBorderColor: '#644424',
                    //     barBorderWidth: '1'
                    //     // color: 'rgba(26,177,98,.8)'
                    // }
                },
                label: {
                    normal: {
                        show: true,
                        position: "right",
                        formatter: "{c}",
                        textStyle: {
                            color: "#01FDFF",
                            fontSize: 12,
                        },
                    },
                },
                barGap: 1,
                data: checkArr,
            },
        ],
    };
    myChart.setOption(option)
}
window.addEventListener("resize", function () {
    myChart?.resize();
});
</script>
  
<style lang="scss" scoped></style>
  